import React from "react";
import './TodoHeader.css';
import {useDispatch} from 'react-redux'
import { addTodo } from "../../../app/slices/todoSlice";

export default function TodoHeader() {
  const dispatch = useDispatch();
  return (
    <div className="todo-header">
      <input type="text" onKeyUp={(e) => {
        if(e.code === 'Enter'){
          //新增任务
          dispatch(addTodo({
            id: Date.now(),//使用时间戳作为 id
            title: e.target.value,
            done: false
          }));
        }
      }} placeholder="请输入你的任务名称，按回车键确认" />
    </div>
  );
}
